<template>
  <div
    class="article-container"
    @click.stop="goToDetailView"
  >
    <div
      class="article-item"
      v-if="category!=8"
    >
      <!-- 计算属性titleList获取文章专栏列表标题 -->
      <p class="article-column">- {{titleList}} -</p>
      <p class="title">{{itemlist.title}}</p>
      <!-- 计算属性descList获取作者名 -->
      <p class="user-name">{{descList}}</p>
      <p class="forward">{{itemlist.forward}}</p>
      <div class="article-pic">
        <img :src="itemlist.img_url">
      </div>
      <div class=" photography-list-icon">
        <div class="feeds-laud-icon icon">
          <img src="../../src/assets/img/article/feeds_laud_default.png">
          <span>{{itemlist.like_count}}</span>

        </div>
        <div class="feeds-share-icon icon">
          <img src="../../src/assets/img/article/feeds_share.png">

        </div>
      </div>
    </div>

    <div
      class="article-item station"
      v-if="category==8"
    >
      <!-- 计算属性titleList获取文章专栏列表标题 -->
      <p class="article-column">- {{titleList}} -</p>
      <!-- <p class="forward">{{itemlist.forward}}</p> -->
      <div class="article-pic article-station">
        <img :src="itemlist.img_url">
        <div class="article-station-volume">
          <img src="../../src/assets/img/article/one_radio_icon.png">
          <p>{{itemlist.volume}}</p>
        </div>
        <div class="article-title">
          <div>{{itemlist.title}}</div>
          <i
            class="icon-play"
            :class="playStatus?'icon-pause':'icon-play'"
            @click.stop="setPlayStatus"
          ></i>
          <p>{{playStatus}}</p>
        </div>
      </div>

      <div class=" photography-list-icon station">
        <div class="article-author">
          <img :src="itemlist.author.web_url">
        </div>
        <span class="station-user-name">{{itemlist.author.user_name}}</span>
        <div class="feeds-laud-icon icon">
          <img src="../../src/assets/img/article/feeds_laud_default.png">
          <span>{{itemlist.like_count}}</span>
        </div>
        <div class="feeds-share-icon icon">
          <img src="../../src/assets/img/article/feeds_share.png">

        </div>
      </div>
    </div>
    <div class="article-item">

    </div>
  </div>
</template>

<script>
// const
export default {
  name: "ArticleCard",
  props: {
    itemlist: Object,
    category: String,
    playStatus: Boolean,
    // src: String,
  },

  data() {
    return {};
  },

  mounted() {
    // console.log(this.src);
  },

  methods: {
    // 跳转前往文章详情页面
    goToDetailView() {
      let { content_id, category } = this.itemlist;
      console.log(this.itemlist);
      this.$router.push({
        path: "/detail",
        query: {
          id: content_id,
          category,
        },
      });
    },
    setPlayStatus() {
      console.log(123);
      let { category } = this.itemlist;
      if (category == 8) {
        this.$emit("set-play-status");
      }
    },
  },
  computed: {
    // 处理专栏标题分类
    titleList() {
      let itemArr = this.itemlist.share_list.wx.title.split("|");
      if (this.category == "8") {
        itemArr[0] = itemArr[0].slice(3);
      }
      // console.log(this.category);

      return itemArr[0];
    },
    // 处理问答专栏作者与其他专栏作者的异同
    descList() {
      let descArr = this.itemlist.share_list.wx.desc.split(" ");
      // console.log(descArr);
      if (this.category == "3") {
        descArr[0] = descArr[0].slice(2) + "答";
      }
      if (this.category == "1") {
        descArr[0] = "文" + " " + "/" + " " + descArr[0].slice(2);
      }
      return descArr[0];
    },
  },
};
</script>

<style lang="scss" scoped>
.article-container {
  width: 100vw;
  padding-top: 10px;
  box-sizing: border-box;
  background-color: rgb(231, 229, 229);
}
.article-item {
  font-size: 14px;
  color: rgb(230 220 220);
  background-color: white;
  //   height: 50vh;
  padding: 0 10px;
  //   border: 1px solid red;
  &.station {
    padding-bottom: 70px;
  }
  .title {
    margin-top: 20px;
    font-size: 22px;
    color: black;
  }
  .user-name {
    margin-top: 10px;
    font-size: 14px;
    color: rgb(184, 178, 178);
  }
  .forward {
    margin: 20px 0 15px;
    font-size: 14px;
    line-height: 2;
    color: black;
  }
  .article-station-volume {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
    font-size: 12px;
    color: rgb(150, 138, 138);
    z-index: 10;
    img {
      display: block;
      width: 46px;
      height: 12px;
      margin-right: 5px;
    }
    p {
      color: #ccc;
    }
  }
  .article-title {
    display: flex;
    align-items: center;
    position: absolute;
    left: 20px;
    bottom: 20px;
    font-size: 20px;

    div {
      width: 300px;
      overflow: hidden;
      white-space: nowrap;
      color: #fff;
      // text-overflow: ellipsis;
    }
  }
  .icon-play {
    width: 33px;
    height: 33px;
    background-image: url("../assets/img/play/feeds_radio_play.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
  .icon-pause {
    width: 33px;
    height: 33px;
    background-image: url("../assets/img/play/feeds_radio_pause.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
}
.article-column {
  padding-top: 20px;
  text-align: center;
  color: rgb(160, 156, 156);
}
.article-pic {
  border-radius: 10px;
  overflow: hidden;
  &.article-station {
    display: flex;
    position: relative;
    margin-top: 20px;
  }

  img {
    display: block;
    width: 100%;
  }
}

.photography-list-icon {
  display: flex;
  justify-content: flex-end;
  height: 30px;
  margin: 15px 20px 15px;
  box-sizing: border-box;
  color: #888080;
  font-size: 12px;
  &.station {
    margin: 15px 10px 15px;
    justify-content: space-between;
    align-items: center;
    .feeds-share-icon {
      margin-right: 0;
      margin-left: 35px;
    }
  }
  .station-user-name {
    margin-right: 115px;
  }
  .article-author {
    display: flex;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    // border: 1px solid red;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .feeds-laud-icon {
    display: flex;
    align-items: center;
    height: 28px;
    // margin-right: 42px;

    span {
      margin-left: 5px;
    }
  }
  .feeds-share-icon {
    margin-right: -10px;
    margin-left: 45px;
  }
  .icon {
    img {
      display: block;
      width: 24px;
      height: 24px;
    }
  }
}
</style>